<template>
  <div class="app-container">
    <u-page title="返券活动管理">
      <div slot="header">
        <el-button type="primary" icon="el-icon-plus" @click="hdlOpen(newForm)">
          {{ textMap['create'] }}
        </el-button>
      </div>

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="档期主题" prop="scheduleId">
            <Schedule v-model="listQuery.schedule" width="160px" @change="changeScheduleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <u-status v-model="listQuery.status" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="hdlDelete(row.id, row.name)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <u-dialog :title="textMap[dialogStatus]" :show.sync="dialogFormVisible" width="980px" @confirm="dialogStatus==='create'? handleCreate():handleUpdate()">
      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="100px">
        <el-form-item label="档期主题" prop="scheduleId">
          <Schedule v-model="dataForm.schedule" type="coupon" valid="valid" style="width: 100%" @change="changeSchedule" />
        </el-form-item>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="dataForm.name" maxlength="20" show-word-limit placeholder="请输入活动名称" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="函云活动ID" prop="alayaId">
          <el-input v-model="dataForm.alayaId" placeholder="请输入函云活动ID" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="消费门槛" prop="threshold">
          <el-input v-model="dataForm.threshold" placeholder="请输入消费门槛" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="返券金额" prop="giftValue">
          <el-input v-model="dataForm.giftValue" placeholder="请输入返券金额" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="优惠券选择" prop="couponId">
          <num-coupon v-model="dataForm.couponId" :multiple="dataForm.schedule && dataForm.schedule.type > 1" :number="dataForm.schedule && dataForm.schedule.type > 1" @change="changeCouponList" />
        </el-form-item>
        <el-form-item v-if="dataForm.schedule && dataForm.schedule.type > 1" label="活动总限" prop="limitPeriod">
          <el-input v-model="dataForm.limitPeriod" placeholder="请输入活动期间限制次数，不限制填0" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="dataForm.schedule && dataForm.schedule.type > 1" label="活动日限" prop="limitDay">
          <el-input v-model="dataForm.limitDay" placeholder="请输入每日限制次数，不限制填0" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </u-dialog>
  </div>
</template>

<script>
import Schedule from '../components/schedule'
import numCoupon from '@/components/coupon/numCoupon'
export default {
  components: {
    numCoupon,
    Schedule
  },
  data() {
    return {
      api: this.$u.api.RebatenewOperationcoupon,
      dataForm: {
        schedule: {},
        scheduleId: '',
        couponId: '',
        couponChooseList: []
      },
      rules: {
        scheduleId: [
          { required: true, message: '档期主题必选', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '活动名称必填', trigger: 'blur' }
        ],
        alayaId: [
          { required: true, message: '函云活动ID必填', trigger: 'blur' }
        ],
        couponId: [
          { required: true, message: '通联卡券必填', trigger: 'blur' }
        ],
        threshold: [
          { required: true, message: '消费门槛必填', trigger: 'blur' }
        ],
        giftValue: [
          { required: true, message: '返券金额必填', trigger: 'blur' }
        ],
        limitDay: [
          { required: true, message: '限制次数必填，不限制填0', trigger: 'blur' }
        ],
        limitPeriod: [
          { required: true, message: '限制次数必填，不限制填0', trigger: 'blur' }
        ]
        // limitDayVip: [
        //   { required: true, message: '限制次数必填，不限制填0', trigger: 'blur' }
        // ],
        // limitPeriodVip: [
        //   { required: true, message: '限制次数必填，不限制填0', trigger: 'blur' }
        // ]
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        scheduleId: '',
        status: true
      },
      textMap: {
        update: '编辑活动',
        create: '新建活动'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      // 表格
      columns: [
        {
          prop: 'scheduleId',
          label: '档期主题',
          formatter: (row, column) => {
            const { schedule } = row
            if (schedule) {
              return schedule.name
            }
          }
        },
        {
          prop: 'scheduleType',
          label: '活动类型',
          render: (h, params) => {
            if (params.row.schedule && params.row.schedule.type === 1) {
              return h('el-tag', { props: { type: 'success' }}, '累计返券')
            } else if (params.row.schedule && params.row.schedule.type === 2) {
              return h('el-tag', '单笔多级满赠')
            } else if (params.row.schedule && params.row.schedule.type === 3) {
              return h('el-tag', { props: { type: 'danger' }}, '累计多级满赠')
            } else if (params.row.schedule && params.row.schedule.type === 5) {
              return h('el-tag', { props: { type: 'warning' }}, '单笔返券')
            } else if (params.row.schedule && params.row.schedule.type === 6) {
              return h('el-tag', { props: { type: 'success' }}, '满额返券')
            } else {
              return h('el-tag', '返礼活动')
            }
          }
        },
        {
          prop: 'scheduleStatus',
          label: '主题状态',
          render: (h, params) => {
            if (params.row.schedule.delFlag) {
              return h('el-tag', { props: { type: 'info' }}, '已删除')
            } else {
              if (params.row.schedule.status) {
                return h('el-tag', { props: { type: 'success' }}, '启用')
              } else {
                return h('el-tag', { props: { type: 'danger' }}, '禁用')
              }
            }
          }
        },
        {
          prop: 'name',
          label: '活动名称'
        },
        {
          prop: 'threshold',
          label: '消费门槛'
        },
        {
          prop: 'giftValue',
          label: '返券金额'
        },
        {
          prop: 'limitPeriod',
          label: '活动总限',
          formatter: (row) => {
            if (row.limitPeriod === 0) {
              return '-'
            } else {
              return row.limitPeriod
            }
          }
        },
        {
          prop: 'limitDay',
          label: '活动日限',
          formatter: (row) => {
            if (row.limitDay === 0) {
              return '-'
            } else {
              return row.limitDay
            }
          }
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            if (params.row.status) {
              return h('el-tag', { props: { type: 'success' }}, '已启用')
            } else {
              return h('el-tag', { props: { type: 'danger' }}, '禁用')
            }
          }
        }
      ],
      listLoading: false,
      list: [],
      listOptions: {
        stripe: true
      },
      newForm: {
        status: true,
        shared: false
      }
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    // 监听优惠券列表
    changeCouponList(list) {
      this.dataForm.couponChooseList = list
    },
    changeSchedule(item) {
      this.dataForm.scheduleId = item.id
    },
    changeScheduleQuery(item) {
      this.listQuery.scheduleId = item.id
    },
    // 新增事件
    handleCreate() {
      const { validityDate } = this.dataForm
      if (validityDate) {
        this.dataForm.beginDate = validityDate[0]
        this.dataForm.endDate = validityDate[1]
      }
      this.dataForm.giftValue = Number(this.dataForm.giftValue)
      this.dataForm.threshold = Number(this.dataForm.threshold)
      console.log(this.dataForm.couponId)
      this.hdlCreate()
    },
    // 打开修改弹窗
    handleEdit(row) {
      const { beginDate, endDate } = row
      row.validityDate = []
      if (beginDate && endDate) {
        row.validityDate = [beginDate, endDate]
      }
      this.hdlEdit(row)
    },
    // 更新操作
    handleUpdate() {
      const { validityDate } = this.dataForm
      if (validityDate) {
        this.dataForm.beginDate = validityDate[0]
        this.dataForm.endDate = validityDate[1]
      }
      this.dataForm.giftValue = Number(this.dataForm.giftValue)
      this.dataForm.threshold = Number(this.dataForm.threshold)
      console.log(this.dataForm.couponId)
      this.hdlUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .disabled {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
}
</style>

